<template>
  <view :class="{big: size === 'big', normal: size === 'normal', small: size === 'middle', small: size === 'small'}">
    <custom-image :isPreviewImage="isPreviewImage" :showMenuByLongpress="false" :urls="icons" :showLoading="false" :src="icon" :errorSrc="type === 'PGC' ? errorSrc : undefined" />
  </view>
</template>

<script>
import { mapState } from 'vuex';
import customImage from '@/components/image';
import errorSrc from '@/static/images/manager-portrait.png';
import defaultPortrait from '@/static/images/default_avatar.svg';
import managerPortrait from '@/static/images/manager-portrait.png';
export default {
  components: {
    customImage,
  },
  props: {
    size: {
      type: String,
      default: 'normal', // big、noraml、small
    },
    userID: {
      type: String,
      default: null
    },
    src: {
      type: String,
      default: null
    },
    type: {
      type: String,
      default: null
    },
    isPreviewImage: {
      type: Boolean,
      default: false
    },
    urls: {
      type: Array,
      default: () => [],
    },
  },
  data: () => ({
    errorSrc,
  }),
  computed: {
    ...mapState({
      umsMember: state => state.app.umsMember,
    }),
    icon() {
      const { type, src, userID, umsMember } = this;
      const { id, icon } = umsMember || {};
      // console.log('umsMember', umsMember);
      const defaultPic = type === 'PGC' ? managerPortrait : defaultPortrait;
      if (id && userID && id + '' === userID + '') {
        return icon || src || defaultPic;
      }
      return src || defaultPic;
    },
    icons () {
      return [this.icon];
    },
  },
  methods: {},
  watch: {},
};
</script>

<style scoped lang="less">
.big {
  min-width: 120rpx;
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  overflow: hidden;
}
.normal {
  min-width: 80rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  overflow: hidden;
}
.middle {
  min-width: 72rpx;
  width: 72rpx;
  height: 72rpx;
  border-radius: 36rpx;
  overflow: hidden;
}
.small {
  min-width: 64rpx;
  width: 64rpx;
  height: 64rpx;
  border-radius: 32rpx;
  overflow: hidden;
}
</style>
